<template>
  <!-- 净值分析 页面 -->
  <div class="netWorthAnalysis-page app-container">
    <div v-if="status==3" class="column">
      <span>母盘净值</span>
      <i class="el-icon el-icon-d-arrow-right" :class="{'openChunk': showChunk6}" @click="showChunk6=!showChunk6" />
    </div>
    <div v-show="showChunk6" v-if="status==3" class="card">
      <div class="left">
        <Chart2 v-if="investId&&info.investTime&&Object.keys(contrastOptions_obj).length" :contrastOptions_obj="contrastOptions_obj" id="chart2" :ids="investId" :id_index="types" 
        :height="280" width="100%" />
      </div>
      <div class="right">
        <el-table
          v-loading="listLoading2"
          :data="list2"
          fit
          max-height="541"
          size="mini"
          :header-cell-style="{background:'#dcedff',color:'#32639d'}"
          style="width: 100%;"
        >
          <el-table-column prop="investAccount" label="账户" min-width="110" fixed></el-table-column>
          <el-table-column prop="investCustomerName" label="账户名称" min-width="160" :show-overflow-tooltip="true" fixed></el-table-column>
          <el-table-column prop="riskRate" label="风险度" min-width="100" align="center"></el-table-column>
          <el-table-column prop="earnestMoney" label="保证金占用" min-width="120" align="center"></el-table-column>
          <el-table-column prop="currentEquity" label="当前权益" min-width="120" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="todayIncom" label="当日浮盈" min-width="80" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="growthRate" label="收益率" min-width="80" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span :class="scope.row.growthRate>=0?'positiveFc':'negativeFc'">{{ scope.row.growthRate }}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="latestNetWorth" label="最新净值" min-width="80" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="currentTradeDate" label="交易日期" width="100" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.currentTradeDate | parseTime }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="column">
      <span>历史走势图</span>
      <i class="el-icon el-icon-d-arrow-right" :class="{'openChunk': showChunk1}" @click="showChunk1=!showChunk1" />
    </div>
    <div v-show="showChunk1" class="showChunk">
      <Chart3 v-if="investId&&Object.keys(contrastOptions_obj).length" :contrastOptions_obj="contrastOptions_obj" id="chart3" :ids="investId" :id_index="types"
      :height="280" width="100%" />
      <div v-else style="height:400px;"></div>
    </div>

    <div class="column">
      <span>收益风险指标</span>
      <i class="el-icon el-icon-d-arrow-right" :class="{'openChunk': showChunk2}" @click="showChunk2=!showChunk2" />
    </div>
    <div v-show="showChunk2" class="showChunk">
      <el-table
        v-loading="listLoading_riskIndicators"
        :data="list_riskIndicators"
        fit size="mini"
        style="width: 100%;margin-top:20px"
        :cell-style="{padding: '8px 0'}"
        :cell-class-name="tableRowClassName"
        :header-cell-style="{background:'#dcedff',color:'#32639d'}"
      >
        <el-table-column type="index" width="200" :index="titleHandle"></el-table-column>
        <el-table-column :prop="key" :label="add_column_list[key]" v-for="(item, key) in list_riskIndicators[0]" :key="key" align="center"></el-table-column>
      </el-table>
    </div>

    <div class="column">
      <span>历史净值</span>
      <i class="el-icon el-icon-d-arrow-right" :class="{'openChunk': showChunk3}" @click="showChunk3=!showChunk3" />
    </div>
    <div v-show="showChunk3" class="showChunk">
      <el-table
        v-loading="listLoading_netWorth"
        :data="list_netWorth"
        stripe fit
        size="mini"
        :cell-style="{padding: '8px 0'}"
        :header-cell-style="{background:'#dcedff',color:'#32639d'}"
        style="width: 100%;margin-top:20px"
      >
        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
        <el-table-column prop="investName" label="投资名称" align="center" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="investCustomerName" label="客户名称" align="center" min-width="220" show-overflow-tooltip></el-table-column>
        <el-table-column prop="tradeDate" label="净值日期" align="center" min-width="100">
          <template slot-scope="{row}">
            <span>{{ row.tradeDate | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="currentEquity" label="单位净值" align="center" min-width="100"></el-table-column>
        <el-table-column prop="currentEquity" label="累计净值" align="center" min-width="100"></el-table-column>
        <el-table-column prop="currentEquity" label="复权累计净值" align="center" min-width="100"></el-table-column>
      </el-table>
      <pagination v-if="total_netWorth>0" style="padding-bottom: 0;" :total="total_netWorth" :page.sync="listQuery.pageCurrent" :limit.sync="listQuery.limit" @pagination="getNetWorth" />
    </div>

    <div class="column">
      <span>历史月度表现</span>
      <i class="el-icon el-icon-d-arrow-right" :class="{'openChunk': showChunk4}" @click="showChunk4=!showChunk4" />
    </div>
    <div v-show="showChunk4" class="showChunk">
      <div class="line" style="margin-top: 20px;">
        <div class="showMonth">
          <div class="round round1"></div>
          {{ investName }}
        </div>
        <div class="showMonth">
          <div class="round round2"></div>
          <el-select style="width: 130px;" v-model="month_contrast" size="mini" placeholder="请选择" @change="monthContrastHandle">
            <el-option
              v-for="item in one_contrastOptions_list"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <el-table
        v-loading="listLoading_netWorth"
        :data="list_showMonth"
        stripe fit
        size="mini"
        :cell-class-name="showMonthTableClassName"
        :cell-style="{padding: '8px 0'}"
        :header-cell-style="{background:'#dcedff',color:'#32639d'}"
        style="width: 100%;margin-top:20px"
      >
        <el-table-column prop="0.year" label="年份" width="100" align="center"></el-table-column>
        <el-table-column :prop="`${i-1+''}`" :label="`${i}月`" align="center" v-for="i in 12" :key="i">
          <template slot-scope="scope">
            <span v-if="scope.row[i-1].growthRate!=null" :class="scope.row[i-1].growthRate>=0?'positiveFc':'negativeFc'">
              {{scope.row[i-1].growthRate}}%
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="12.growthRate" label="YTD" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row[12].growthRate!=null" :class="scope.row[12].growthRate>=0?'positiveFc':'negativeFc'">
              {{scope.row[12].growthRate}}%
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="line" style="margin-top: 20px;">
        <el-button-group>
          <el-button size="small" :type="monthChartBtn?'':'primary'" @click="monthChartBtn=0">月度回报</el-button>
          <el-button size="small" :type="monthChartBtn?'primary':''" @click="monthChartBtn=1">收益分布</el-button>
        </el-button-group>
      </div>
      <div class="month-chartContent">
        <div class="mChunk">
          <showmonth-chart v-if="investName&&monthChartBtn" id="showmonthChart" :name_contrast="name_contrast" :month_contrast="month_contrast" :y-name="investName" :data="list_monthNetWorthLine" height="350px" width="100%" />
          <month-return-chart v-else-if="investName&&(!monthChartBtn)" id="monthReturnChart" :name_contrast="name_contrast" :month_contrast="month_contrast" :y-name="investName" :data="list_monthNetWorthDistributed" :height="400" width="100%" />
        </div>
        <div class="mChunk">
          <el-table
            v-if="investName&&monthChartBtn"
            v-loading="findNetWorthExtendByStrategyId2_loading"
            :data="list_showMonth_profit"
            stripe fit
            size="mini"
            :cell-style="{padding: '6px 0'}"
            :header-cell-style="{background:'#dcedff',color:'#32639d'}"
            style="width: 100%;margin-top:20px"
            :key="list_showMonth_key"
          >
            <el-table-column prop="" label="" align="center">
              <template slot-scope="scope">
                <span>{{list_showMonth_profit_column1[scope.$index].name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="1" :label="investName" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.incomeRate" :class="scope.row.incomeRate>0?'positiveFc':'negativeFc'">{{ scope.row.incomeRate }}%</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="2" :label="name_contrast" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.growth" :class="scope.row.growth>0?'positiveFc':'negativeFc'">{{ scope.row.growth }}%</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            v-show="investName&&(!monthChartBtn)"
            v-loading="getMonthNetWorthDetial_loading"
            :data="list_table_getMonthNetWorthDetial"
            stripe fit
            size="mini"
            :cell-style="{padding: '6px 0'}"
            :header-cell-style="{background:'#dcedff',color:'#32639d'}"
            style="width: 100%;margin-top:20px"
          >
            <el-table-column prop="tradeDateStr" label="净值日期" align="center"></el-table-column>
            <el-table-column prop="latestNetWorth" label="单位净值" align="center"></el-table-column>
            <el-table-column prop="latestNetWorth" label="累计净值" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.latestNetWorth"><span style="color:#F00;">*</span>{{ scope.row.latestNetWorth }}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="growthRate" label="月涨跌幅" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.growthRate&&scope.row.growthRate!=0" :class="scope.row.growthRate>0?'positiveFc':'negativeFc'">{{ scope.row.growthRate }}%</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="monthNetWorthDetial_total>0&&investName&&(!monthChartBtn)" style="padding-bottom: 0;" 
            :total="monthNetWorthDetial_total" 
            :page.sync="monthNetWorthDetial_listQuery.pageCurrent" 
            :limit.sync="monthNetWorthDetial_listQuery.limit" @pagination="getMonthNetWorthDetial" 
          />
        </div>
      </div>
    </div>

    <div style="height: 150px;"></div>
  </div>
</template>

<script>
import { getInvestRiskInditor, getInvestMonthEquityDetial, queryEquityHistory, getInvestMonthlyIncrease, findEquityBySegment, getMonthInvestEquityDistributed, monthlyEquityHistogram, findAccountByInvestId } from '@/api/afterInvest'
import { getIndexRiskByIndexTypeAndTime, getMonthlyIndex, findTimeScopeGrowth } from '@/api/policyManage'
import showmonthChart from '@/components/Charts/lineEcharts_netWorthShowMonth.vue'
import monthReturnChart from '@/components/Charts/barEcharts_monthReturn.vue'
import Pagination from '@/components/Pagination'
import { parseTime, deepClone } from '@/utils'
import Chart2 from '@/components/Charts/afterInvest/afterInvest_2.vue'
import Chart3 from '@/components/Charts/afterInvest/chart3.vue'

export default {
  name: 'NetWorthAnalysis',
  components: { Pagination, showmonthChart, monthReturnChart, Chart3, Chart2 },
  props: {
    contrastOptions_obj: {
      type: Object,
      default: () => {
        return {}
      }
    },
    types: {
      type: Array,
      default: () => {
        return []
      }
    },
    info: {
      type: Object,
      default: () => {
        return {}
      }
    },
    start_date: String,
    investName: String,
    status: Number | String
  },
  data() {
    return {
      investId: '',

      list2: [],
      listLoading2: false,

      one_contrastOptions_list: [],
      contrastIndex_obj: {}, // 收益走势对比指数
      contrastIndexRisk_obj: {}, // 风险概括对比指数
      scrollCard: false,
      formData: {
        types: []
      },

      showChunk1: true,
      showChunk2: true,
      showChunk3: true,
      showChunk4: true,
      showChunk5: true,
      showChunk6: true,

      userId: '',
      strategyType: 0, // 区分策略和组合策略
      listLoading_netWorth: false,
      listQuery: {
        pageCurrent: 1,
        limit: 10
      },
      list_netWorth: [], //历史净值
      total_netWorth: 0,
      strategy_dels: {}, //策略详情

      listLoading_riskIndicators: false,
      list_riskIndicators: [], // 收益风险指标
      _list_riskIndicators: [], // 保存基础 收益风险指标
      riskIndicators_columnLabel: {
        'annualizedIncomeRate': '年化收益',
        'annualFluctuationsRate': '年化波动',
        'sharpeRate': '夏普比率',
        'maximumDrawdownRate': '最大回撤',
        'calmarRate': '卡玛比率',
        'maxBackIncomDay': '最大回补天数'
      },
      add_column_list: [],

      list_netWorthLine: [], //净值曲线
      chart_date: [],

      // todo 月度表现
      listLoading_monthNetWorth: false,
      month_contrast: undefined,
      name_contrast: '',
      list_showMonth: [],
      _list_showMonth: [],
      monthChartBtn: 0,
      list_showMonth_profit: [],
      list_showMonth_key: 0,
      list_showMonth_profit_column1: [
        { id: 99, name: '成立以来' },
        { id: 0, name: '今年以来' },
        { id: 1, name: '近1月' },
        { id: 3, name: '近3月' },
        { id: 6, name: '近6月' },
        { id: 12, name: '近1年' },
        { id: 24, name: '近2年' },
        { id: 36, name: '近3年' },
      ],
      list_monthNetWorthLine: [], // 收益分布
      findNetWorthExtendByStrategyId2_loading: false, // 收益分布 列表loading
      list_monthNetWorthDistributed: [], // 月度回报 echart
      list_table_getMonthNetWorthDetial: [], // 月度回报 列表
      getMonthNetWorthDetial_loading: false, // 月度回报 列表loading
      monthNetWorthDetial_listQuery: { // 月度回报 分页
        pageCurrent: 1,
        limit: 10
      },
      monthNetWorthDetial_total: 0,

      // 风险概括
      risk_contrast: '沪深300',
      listLoading_risk: false,
      list_risk_chart: [],

      // 策略组合
      listLoading: false,
      portfolioId: undefined,
      strategyPortfolio: {}, // 历史配置设置用
      strategyPortfolioDetials: [], 
      portfolioNetWorthBean: [], // 123..月
      netWorthDetialBeanList: [], // 子策略数据
    }
  },
  watch: {
    types: {
      handler(newVal, oldVal) {
        if(Object.keys(this.contrastOptions_obj).length) {
          this.one_contrastOptions_list = []
          newVal.forEach(item => {
            this.one_contrastOptions_list.push({
              id: item,
              name: this.contrastOptions_obj[item]
            })
          })
          this.month_contrast = newVal[0]
          if(this.chart_date.length) this.monthContrastHandle(newVal[0])
        }
      },
      deep: true
    },
    month_contrast(val) {
      if(val) {
        this.name_contrast = this.contrastOptions_obj[val] // 月度表现头部修改
      }
    }
  },
  created() {
    this.investId = this.$route.query.id
    this.chart_date[0] = this.start_date
    this.chart_date[1] = parseTime(new Date())
    this.month_contrast = this.types[0]
    this.types.forEach(item => {
      this.one_contrastOptions_list.push({
        id: item,
        name: this.contrastOptions_obj[item]
      })
    })

    this.findAccountByInvestId(this.investId)
    this.getriskIndicators()
    this.getNetWorth()
    this.getMonthNetWorth(this.investId)
    this.monthContrastHandle(this.month_contrast)
    this.findNetWorthExtendByStrategyId2(this.investId)
    this.getMonthNetWorthLine(this.investId)
    this.getMonthNetWorthDistributed(this.investId)
    this.getMonthNetWorthDetial(this.investId)
  },
  methods: {
    // 保存应用
    saveParamsHandle() {
      // this.findIndexByIndexTypeAndIndexTime(this.chart_date[0], this.chart_date[1], this.formData.types)
      // this.findIndexMaxDown(this.chart_date[0], this.chart_date[1], this.formData.types)
      this.getIndexRiskByIndexTypeAndTime(this.types)
    },
    findAccountByInvestId(investId) {
      this.listLoading2 = true
      findAccountByInvestId({
        investId
      }).then(res => {
        this.listLoading2 = false
        this.list2 = res.body
      })
    },
    showMonthTableClassName({ rowIndex, columnIndex }) {
      if(columnIndex === 0 && rowIndex%2 === 0) {
        return 'showMonthyearBorder0'
      }else if(columnIndex === 0 && rowIndex%2 !== 0) {
        return 'showMonthyearBorder1'
      }
    },
    tableRowClassName({ columnIndex }) {
      if (columnIndex === 0) {
        return 'title-row'
      } else if (columnIndex === 1) {
        return 'cell-row-0'
      } else if (columnIndex === 2) {
        return 'cell-row-1'
      } else if (columnIndex === 3) {
        return 'cell-row-2'
      } else if (columnIndex === 4) {
        return 'cell-row-3'
      } else if (columnIndex === 5) {
        return 'cell-row-4'
      } else if (columnIndex === 6) {
        return 'cell-row-5'
      } else if (columnIndex === 7) {
        return 'cell-row-6'
      }
      return ''
    },
    titleHandle(i) {
      const key_list = Object.keys(this.riskIndicators_columnLabel)
      return this.riskIndicators_columnLabel[key_list[i]]
    },
    // 收益风险指标
    getriskIndicators() {
      this.listLoading_riskIndicators = true
      getInvestRiskInditor({
        investId: this.investId
      }).then(res => {
        console.log('风险指标', res)
        this.add_column_list.push(this.investName)
        Object.keys(this.riskIndicators_columnLabel).forEach((key, i) => {
          const val = res.body[key]
          this.list_riskIndicators[i] = {}
          this.list_riskIndicators[i]['0'] = val
        })
        this._list_riskIndicators = deepClone(this.list_riskIndicators)
        this.getIndexRiskByIndexTypeAndTime(this.types)
      })
    },
    // 收益风险指标 指数
    getIndexRiskByIndexTypeAndTime(indexType) {
      console.log('收益风险指标 指数', this.chart_date)
      getIndexRiskByIndexTypeAndTime({
        indexType,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1],
      }).then(res => {
        console.log('收益风险指标 对比', res)
        this.listLoading_riskIndicators = false
        const key_list = ['annualizedIncomeRate', 'annualFluctuationsRate', 'sharpeRate', 'maximumDrawdownRate', 'calmarRate', 'maxBackIncomDay']
        const obj = res.body
        this.add_column_list = this.add_column_list.slice(0, 1)
        this.list_riskIndicators = deepClone(this._list_riskIndicators)
        Object.keys(obj).forEach(key => {
          const element = obj[key]
          const header = this.contrastOptions_obj[key]
          this.list_riskIndicators.forEach((item, i) => {
            const index = Object.keys(item).length
            if(index!==0) {
              item[index] = element[key_list[i]]
            }else {
              item[1] = element[key_list[i]]
            }
          })
          this.add_column_list.push(header)
        })
      })
    },
    getNetWorth() {
      this.listLoading_netWorth = true
      queryEquityHistory({
        investId: this.investId,
        ...this.listQuery
      }).then(res => {
        this.listLoading_netWorth = false
        console.log('历史净值', res)
        this.list_netWorth = res.body.list
        this.total_netWorth = res.body.total
      })
    },
    // 指数月度表现
    monthContrastHandle(indexType) {
      getMonthlyIndex({
        indexType,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1]
      }).then(res => {
        console.log('指数月度表现', res)
        Object.keys(res.body).forEach(key => {
          const items = res.body[key]
          items.forEach(item => {
            if(item.indexTime) {
              item.month = Number(item.indexTime.slice(5))
            }else {
              item.month = 13
            }
            item.growthRate = item.indexGrowthRate==null ? null : Number(item.indexGrowthRate)
          })
        })
        const list = Object.keys(res.body).map(function(i) { return res.body[i] })
        const new_list = deepClone(list)
        list.forEach((items, index) => {
          if(items.length<13) {
            new_list[index] = []
            const year = items[0].year
            for(let i=0; i<13; i++) {
              if(items[i]&&items[i].month != i+1) {
                if(!new_list[index][i]) {
                  new_list[index][i] = {
                    year: items[i].year
                  }
                }
                new_list[index][items[i].month-1] = deepClone(items[i])
              }else if(!new_list[index][i]) {
                if(items[i]&&items[i].month == i+1) {
                  new_list[index][items[i].month-1] = deepClone(items[i])
                }else {
                  new_list[index][i] = {
                    year
                  }
                }
              }
            }
          }
        })
        this.list_showMonth = deepClone(this._list_showMonth)
        new_list.forEach(element => {
          this.list_showMonth.forEach((item, i) => {
            if(element[0].year == item[0].year) {
              this.list_showMonth.splice(i+1, 0, element)
            }
          })
        })
      })
      if(this.month_contrast) this.findTimeScopeGrowth(this.month_contrast)
    },
    // 历史月度表现
    getMonthNetWorth(investId) {
      this.listLoading_monthNetWorth = true
      getInvestMonthlyIncrease({
        investId
      }).then(res => {
        this.listLoading_monthNetWorth = false
        const list = Object.keys(res.body).map(function(i) { return res.body[i] })
        const new_list = deepClone(list)
        console.log('历史月度表现', list)
        list.forEach((items, index) => {
          if(items.length<13) {
            new_list[index] = []
            const year = items[0].year
            for(let i=0; i<13; i++) {
              if(items[i]&&items[i].month != i+1) {
                if(!new_list[index][i]) {
                  new_list[index][i] = {
                    year: items[i].year
                  }
                }
                new_list[index][items[i].month-1] = deepClone(items[i])
              }else if(!new_list[index][i]) {
                if(items[i]&&items[i].month == i+1) {
                  new_list[index][items[i].month-1] = deepClone(items[i])
                }else {
                  new_list[index][i] = {
                    year
                  }
                }
              }
            }
          }
        })
        this.list_showMonth = new_list
        this._list_showMonth = deepClone(new_list)
        console.log('历史月度表现 修改........', this.list_showMonth)
      })
    },
    // 收益分布 柱状图
    getMonthNetWorthLine(investId) {
      monthlyEquityHistogram({
        investId
      }).then(res => {
        console.log('收益分布', res)
        this.list_monthNetWorthLine = res.body
      })
    },
    headTail(list) {
      list.unshift(list[list.length-1])
      list.splice(list.length-1, 1)
    },
    // 收益分布 列表
    findNetWorthExtendByStrategyId2(investId) {
      this.findNetWorthExtendByStrategyId2_loading = true
      findEquityBySegment({
        investId
      }).then(res => {
        console.log('收益分布 列表', res)
        this.headTail(res.body)
        this.list_showMonth_profit = res.body
        setTimeout(() => {
          this.findTimeScopeGrowth(this.month_contrast)
        }, 100)
      })
    },
    // 收益分布 列表 指数
    findTimeScopeGrowth(indexType) {
      findTimeScopeGrowth({
        indexType,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1],
      }).then(res => {
        console.log('对比指数 收益分布 列表', res)
        this.headTail(res.body)
        this.findNetWorthExtendByStrategyId2_loading = false
        this.list_showMonth_profit.forEach((item, i) => {
          item.growth = res.body[i].growth
        })
        this.list_showMonth_key++
      })
    },
    // 月度回报
    getMonthNetWorthDistributed(investId) {
      getMonthInvestEquityDistributed({
        investId
      }).then(res => {
        console.log('月度回报', res)
        this.list_monthNetWorthDistributed = res.body
      })
    },
    // 月度回报 列表
    getMonthNetWorthDetial(investId) {
      this.getMonthNetWorthDetial_loading = true
      getInvestMonthEquityDetial({
        investId,
        ...this.monthNetWorthDetial_listQuery
      }).then(res => {
        console.log('月度回报 列表', res)
        this.getMonthNetWorthDetial_loading = false
        this.list_table_getMonthNetWorthDetial = res.body.list
        this.monthNetWorthDetial_total = res.body.total
      })
    },
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.netWorthAnalysis-page {
  position: relative;
  .card {
    display: flex;
    padding-bottom: 15px;
    .left {
      width: 55%;
      margin-top: 12px;
    }
    .right { width: 45%; margin-top: 12px; }
  }
  .column {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-top: 30px;
    cursor: pointer;
    user-select: none;
    .el-icon { color: #4F95DD; font-weight: bold; margin-left: 6px; }
    .openChunk { transform: rotate(90deg); }
    &::before {
      display: inline-block;
      content: '';
      width: 6px;
      height: 26px;
      background: #42b983;
      margin-right: 6px;
    }
  }
  .head {
    padding: 15px 15px 0;
    border: 1px solid #e1e0e0;
    font-size: 14px;
    .redFont { color: #c00; }
    .fromLine {
      display: flex;
      line-height: 24px;
      .label { width: 80px; text-align: right; }
      // .fromLine-content {}
    }
    .chunk {
      display: flex;
      > div:nth-of-type(1) { width: 28%; }
      > div:nth-of-type(2) { width: 22%; }
      > div:nth-of-type(3) { width: 22%; }
      > div:nth-of-type(4) { width: 28%; }
      .chunk-strategyType { 
        width: 100% !important; height: 100%;
        display: flex;
        > div { flex: 1; }
        > div + div {
          border-left: 1px dashed #e1e0e0;
          margin-left: 20px;
        }
        .netWorth-strategyType {
          justify-content: space-around;
        }
      }
      .history-strategyType {
        div {
          display: flex;align-items: center;
          .label {
            justify-content: flex-end;
          }
        }
        & + .history-strategyType {
          margin-left: 20px;
        }
      }
    }
    .chunk + .chunk { border-top: 1px dashed #e1e0e0; }
    .title {
      height: 84px;
      .product {
        h3 {font-size: 22px;}
        .tips {
          margin-top: 30px;
          .tip {
            border: 1px solid #3D71AE;
            color: #3D71AE;
            padding: 3px 6px;
            & + .tip { margin-left: 6px; }
          }
        }
      }
      // .info {
      //   padding-left: 7%;
      // }
    }
    .title-center { line-height: 35px; }
    .data {
      height: 114px;
      padding: 10px 0;
      > div + div {
        border-left: 1px dashed #e1e0e0;
        margin-left: 20px;
      }
      .netWorth {
        display: flex;
        justify-content: space-between;
        .label { width: 100px; text-align: right; }
        .netWorth1 { 
          display: flex; flex-direction: column; justify-content: center; align-items: center; 
          .num { font-size: 32px; line-height: 38px; color: #c00; }
        }
        .netWorth2 { display: flex; flex-direction: column; justify-content: center; align-items: center; div { line-height: 36px; } }
      }
      .profit, .history {
        > div {line-height: 32px;}
        > div {
          display: flex; justify-content: space-around;
          span {width: 33.33%;text-align: center;}
        }
      }
      .other {
        display: flex;
        > div {display: flex; flex-direction: column; justify-content: space-around;}
      }
    }
    .operation {
      height: 80px;
      display: flex;
      align-items: center;
    }
  }
  .from-alignCenter {
    ::v-deep .el-form{
      .el-form-item { margin-bottom: 0; }
    }
  }
  .title {
    .sub-title {
      display: flex;
      margin-top: 20px;
      span + span::before {
        display: inline-block;
        content: '|';
        padding: 0 20px;
      }
    }
  }
  .showHistoryChunk {
    display: flex;
    .historyChunk {
      // flex: 1;
      width: 50%;
      &:nth-child(1) { width: 100%; }
    }
  }
  .scrollCard {
    width: calc(100% - #{$sideBarWidth} - 80px);
    height: 80px;
    font-size: 14px;
    background: #FFF;
    z-index: 668;
    border: 1px solid #e1e0e0;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    padding-left: 15px;
  }
  .line {
    display: flex;
    .showMonth {
      display: flex;
      align-items: center;
      & + .showMonth {margin-left: 15px;}
      .round {width: 10px;height: 10px;border-radius: 50%;margin-right: 5px;}
      .round1 {background: #e16757;}
      .round2 {background: #78b2eb;}
    }
  }
  .month-chartContent {
    display: flex;
    .mChunk {width: 50%;}
  }
  ::v-deep .el-table {
    .title-row {
      background: #dcedff !important;
    }
    .cell-row-0 {
      background: #FFF7F7 !important;
    }
    .cell-row-1 {
      background: #FFFCF5 !important;
    }
    .cell-row-2 {
      background: #FFFBFD !important;
    }
    .cell-row-3 {
      background: #FAFFFB !important;
    }
    .cell-row-4 {
      background: #FFFCFC !important;
    }
    .cell-row-5 {
      background: #F9FDFF !important;
    }
    .cell-row-6 {
      background: #FDFBFE !important;
    }

    // 历史月度表现
    .showMonthyearBorder0 {
      border-right: 2px solid #e16757;
    }
    .showMonthyearBorder1 {
      border-right: 2px solid #78b2eb;
    }
  }
}
</style>

